<template>
	<ul class="input-item-demo3">
		<li>
			<ynet-field title="项目名称">
				<ynet-input-item
					ref="input12"
					v-model="value"
					type="money"
					placeholder="最多30万元"
					size="middle"
					is-amount
					clearable
					brief="输入文本"
				>	
					<ynet-icon name="rmb" size="lg" svg slot="left"></ynet-icon>
					<ynet-icon name="edit" slot="right" @click="$refs.input12.focus()"></ynet-icon>
				</ynet-input-item>
			</ynet-field>
		</li>
		<li>
			<ynet-field title="项目名称">
				<ynet-input-item
					ref="input14"
					v-model="value"
					type="money"
					placeholder="最多30万元"
					size="middle"
					is-amount
					clearable
					brief="输入文本"
					error="余额不足，请切换其他还款账户"
				>	
					<ynet-icon name="rmb" size="lg" svg slot="left"></ynet-icon>
				</ynet-input-item>
			</ynet-field>
		</li>
		<li>
			<ynet-field title="项目名称">
				<ynet-input-item
					ref="input15"
					v-model="value"
					type="money"
					brief="理财提示文案"
					placeholder="最多30万元"
					size="middle"
					is-amount
					input-amount
					clearable
					desc="辅助文字说明"
				>	
					<ynet-icon name="rmb" size="lg" svg slot="left"></ynet-icon>
				</ynet-input-item>
			</ynet-field>
		</li>
		<li>
			<ynet-field title="项目名称">
				<ynet-input-item
					ref="input16"
					v-model="value"
					type="money"
					brief="理财提示文案"
					placeholder="最多30万元"
					size="middle"
					is-amount
					input-amount
					clearable
					desc="辅助文字说明"
				>	
					<div slot="left" style="display:inline-flex">
						<div class="reduce"></div>
						<ynet-icon name="rmb" size="lg" svg slot="left"></ynet-icon>
					</div>
					<div class="add" slot="right"></div>
				</ynet-input-item>
			</ynet-field>
		</li>
	</ul>
</template>
<script>
	import { Field, InputItem, NumberKeyboard, Icon } from 'ynet-mobile'
	import '@/assets/svg/rmb.svg?icon'
	export default {
		title: '大尺寸表单输入',
		name: 'input-item-demo',
		components: {
			[Field.name]: Field,
			[InputItem.name]: InputItem,
			[NumberKeyboard.name]: NumberKeyboard,
			[Icon.name]: Icon
		},
		data(){
			return {
				value: ''
			}
		},
		computed: {
			size(){
				return this.value.length > 10 ? 'small' : 'large'
			}
		}
	}
</script>
<style lang="scss">
	.input-item-demo3{
		li{
			margin-top: .2rem;
		}
		.md-icon-edit{
			margin-left:.2rem
		}

		.reduce{
			margin-left: .01rem;
			margin-right: .2rem;
			position: relative;
			width: 0.42rem;
			height: 0.42rem;
			background-color: #fff;
			border: solid 0.5px #DCDCDC;
			border-radius: 0.02rem;
			&::before{
				content: "";
				position: absolute;
				width: 0.24rem;
				height: 0.02rem;
				top: 50%;
				left: 50%;
				background: #111a34;
				transform: translate(-50%, -50%);
			}
		}

		.add{
			margin-left: .2rem;
			position: relative;
			width: 0.42rem;
			height: 0.42rem;
			background-color: #fff;
			border: solid 0.5px #DCDCDC;
			border-radius: 0.02rem;
			&::before{
				content: "";
				position: absolute;
				width: 0.02rem;
				height: 0.24rem;
				left: 50%;
				top: 50%;
				background: #111a34;
				transform: translate(-50%, -50%);
			}
			&::after{
				content: "";
				position: absolute;
				width: 0.24rem;
				height: 0.02rem;
				top: 50%;
				left: 50%;
				background: #111a34;
				transform: translate(-50%, -50%);
			}
		}
	}
</style>